<template>
  <span class="menu-link" @click="toggleChatWindow()">
    <ElBadge :value="unreadCount || ''" :max="99">
      <i class="header-btn-icon el-icon-chat-dot-square"></i>
    </ElBadge>
    <ChatWindow :visible="chatWindowVisible" @update:visible="val => toggleChatWindow(val)" />
  </span>
</template>

<script>
  import { mapMutations, mapState } from 'vuex'

  export default {
    name: 'TopIm',
    components: {
      ChatWindow: () => import('@/components/im/ChatWindow.vue')
    },
    computed: {
      ...mapState('im', ['chatWindowVisible', 'unreadCount'])
    },
    methods: {
      ...mapMutations('im', ['toggleChatWindow'])
    }
  }
</script>
